import { Button } from "antd";
import { ArrowLeftOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import { useParams } from "react-router-dom";
import { getVideo } from "@/api/api_upload.ts";
import { useEffect, useState } from "react";
const VideoDetail = () => {
  const Navigate = useNavigate();
  const { id } = useParams();

  const [url, setUrl] = useState("");
  const [description, setDescription] = useState("");

  useEffect(() => {
    getVideoList(id);
  }, [id]);

  const getVideoList = async (id) => {
    try {
      const res = await getVideo(id);

      setUrl(res.data.video_url);
      setDescription(res.data.description);
      // console.log(res.data);
    } catch (error) {
      console.log(error);
    }
  };

  const toPage = () => {
    // 跳转到详情页,传递id
    Navigate("/video");
  };

  // 根据 url 是否为空，决定 video 标签中 src 属性的值
  const videoSource = url ? { src: url } : {};
  return (
    <div style={{ display: "flex", height: 100 + "vh" }}>
      <div
        style={{
          flex: 1,
          paddingLeft: 50,
        }}
      >
        <div style={{ marginBottom: 10 }}>
          <Button onClick={toPage} type="link" icon={<ArrowLeftOutlined />}>
            返回
          </Button>
        </div>

        <video controls {...videoSource} style={{ width: 100 + "%" }}>
          Your browser does not support the video tag.
        </video>
        <div>
          <p style={{ fontWeight: "bold", marginTop: 10 }}>{description}</p>
        </div>
      </div>
      <div style={{ width: 700 }}></div>
    </div>
  );
};

export default VideoDetail;
